<template>
    <div id="secHand">
        <!--后退-->
        <img class="back"style=""src="../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
        <!--用户信息-->
        <div id="userInfo">
            <router-link to="/userCom" style="text-decoration:none;">
                <img style="width:3rem;height:3rem;border-radius:50%;" :src="showData.userModel.headPortrait" alt="">
            </router-link>
            <p style="font-size:0.9rem;">{{showData.userModel.nickName}}<img v-if="showData.userModel.sex==1" style="margin-left:0.3rem;height:0.8rem;width:0.8rem;"src="../../assets/homepage/male.png" alt=""><img v-if="showData.userModel.sex==2" style="margin-left:0.3rem;height:0.8rem;width:0.8rem;" src="../../assets/homepage/women.png" alt=""></p>
             <rate disabled :length="5" v-model="showData.userModel.totalStar"/>
        </div>
        <!--联系方式-->
        <div id="way">
            <div>
                <img style="width:2rem;height:2rem;" src="../../assets/homepage/call.png" alt="">
                <p @click="callphone()">电联</p>
            </div>
            <div>
                <p style="border-left:1px solid #9d9d9d;border-right:1px solid #9d9d9d;">
                <img style="width:2rem;height:2rem;" src="../../assets/homepage/msg.png" alt=""></p>
                <p @click="sendMsg">发短信</p>
            </div>
            <div>
                <img style="width:2rem;height:2rem;" src="../../assets/homepage/sell.png" alt=""></p>
                <p @click="sendMsg">发短信</p>
            </div>
        </div>
        <div id="userDe">
            <div class="commodity">
                <div class="comTit">
                    <p style="font-size:1rem;color:#2aa095;">{{showData.amount}}<span>￥</span></p> 
                    <p>{{turnTime(showData.initiatorTime)}} <span>发布</span></p>
                    <p>{{showData.taskName}}</p>
                </div>
                <div class="comCon">
                    {{showData.taskExplain}}
                </div>
            </div>
            <div class="shops">
                <div v-for="item in leaveMessDatas" class="card" style="height:4.5rem;margin:1rem 0;border-bottom:0.05rem solid #888888;">
                    <div style="height:1.5rem;display:flex;">
                        <p style="width:15%"><img style="height:3rem;width:3rem;border-radius:50%" :src="item.userModel.headPortrait" alt=""></p>
                        <div style="width:41%;">
                            <p style="font-size:0.3rem;">{{item.userModel.nickName}}</p>
                            <p>
                                <img style="width:0.8rem;height:0.8rem;"src="../../assets/homepage/star.png" alt="">
                                <img style="width:0.8rem;height:0.8rem;"src="../../assets/homepage/star.png" alt="">
                                <img style="width:0.8rem;height:0.8rem;"src="../../assets/homepage/star.png" alt="">
                                <img style="width:0.8rem;height:0.8rem;"src="../../assets/homepage/star.png" alt="">
                                <img style="width:0.8rem;height:0.8rem;"src="../../assets/homepage/star.png" alt="">                                
                            </p>
                        </div>
                        <p style="width:47%;font-size:0.8rem;color:#8e8e8e;">{{turnTime(item.createTime)}} <span>发布</span></p>
                    </div>
                    <div style="margin:1rem 3.5rem 0rem;font-size:0.8rem;">
                        {{item.message}}
                    </div>
                </div>
               
               
            </div>
            
        </div>
        <!--发布-->
        <button id="join" @click="getTask">报名此兼职</button>
         <div class="leaBottom">
             <input v-model="leaMess" type="text"><button @click="leaveMessage">留言</button>
         </div>
    </div>
</template>
<script>
import turnTime from '../../server/dataTime.js'
export default {
  data () {
    return {
        leaveMessDatas:[],
        leaMess:undefined,
        turnTime:turnTime,
        showData:{
            userModel:{
                headPortrait:undefined,
            }
        }
    }
  },
  created(){
      this.getDetailData()
      this.checkTaskLeaMess()
  },
  methods:{
    //   任务报名
    getTask(){
         this.$api.getTask(this.$route.params.id).then((res)=>{
              if(res.code=='000000'){
                    this.$router.push({
                        path: '/cueMsg',
                    })
              }
          })
    },
       //   查询一个任务的所有留言
       checkTaskLeaMess(){
           this.$api.checkLeaMess(this.$route.params.id).then((res)=>{
              if(res.code=='000000'){
                  this.leaveMessDatas = res.data
              }
          })
       },
       //   留言函数
       leaveMessage(){
           var obj = {};
           obj.taskId  = this.$route.params.id;
           obj.message = this.leaMess;
            this.$api.leaveMessage(obj).then((res)=>{
              if(res.code=='000000'){
                  this.checkTaskLeaMess()
              }
          })
       },
       getDetailData(){
          this.$api.getTaskDataDetail(this.$route.params.id).then((res)=>{
              if(res.code=='000000'){
                  this.showData = res.data
              }
          })
      },
    callphone(){
         window.location.href = "tel:"+this.showData.common4;
    },
    sendMsg(){
        window.location.href = "sms:"+this.showData.common4;
    }
  }
}
</script>
<style>
#secHand .Rate__star[disabled][data-v-59a74259]{
    color:#efc20f!important;
}
#secHand .icon[data-v-59a74259]{
    width:1rem!important;
    height:1rem!important;
    margin:0!important;
}
#secHand .Rate__star{
    padding:0 0.25rem!important;
}
#secHand .leaBottom{
    position:fixed;
    left:2.3rem;
    bottom:2rem;
}
#secHand .leaBottom input{
    height:1rem;
    width:18rem;
    border-radius:5px;
}
#secHand .leaBottom button{
    width:3rem;
    height:2.4rem;
    margin-left:0.3rem;
}
#secHand {
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../assets/homepage/bg.png);
}
#secHand .back{
    height:0.75rem;
    width:0.4rem;
    margin:0.9rem 0.6rem;
}
#secHand #userInfo{
    margin:4vh auto 5vh;
    width:40%;
    text-align:center;
}
#secHand #userInfo img:nth-child(n+3){
    width:0.8rem;
    height:0.8rem
}
#secHand #way{
    width:70%;
    line-height:1.5rem;
    margin:0 auto;
    display:flex;
    font-size:0.6rem;
    color:#9d9d9d
}
#secHand #way > div{
    width:50%;
    text-align:center;
}
#secHand #userDe{
    margin:8% auto;
    width:93%;
}
#secHand #userDe .commodity{
    background:#ffffff;
    width:100%;
    height:6.5rem;
    border:1px solid #c5aca0;
    border-radius:13px;
    padding:0.9rem 0.6rem;
}
#secHand #userDe .commodity .comTit{
  height:0.8rem;
  line-height:1rem;
  display:flex;
  justify-content:space-between;
}
#secHand #userDe .commodity .comCon{
    font-size:0.8rem;
    padding:1rem;
}
#secHand #userDe .commodity .comTit p{
   font-size:0.8rem;
   color:#8e8e8e; 
}
#secHand #userDe .shops{
    background:#ffffff;
    width:100%;
    height:10rem;
    overflow:scroll;
    border:1px solid #c5aca0;
    border-radius:13px;
    padding:0rem 0.6rem 0.9rem;
}
#secHand #join{
    width:40%;
    height:2.5rem;
    margin:0 30%;
    background:#ffffff;
    border:1px solid #9d9d9d;
    font-size:0.8rem;
    color:#2aa095;
    border-radius:13px;
}
</style>
